<!DOCTYPE html>
<html>

	<head>
		<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
		<script type="text/javascript" src="js/slider.js" ></script>
		<script type="text/javascript" src="js/index.js" ></script>
		<meta charset="UTF-8">
		<title>leaf装饰</title>
	</head>
	<link href='http://fonts.googleapis.com/css?family=Oswald:700' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" href="iframe/css/head.css" />
	<link rel="stylesheet" href="iframe/css/navigation.css" />
	<link rel="stylesheet" href="css/commodity.css" />
	<body>
		<header>
			<nav>
				<div class="nav-l">
					<div style="margin-left:0;">
						<div>
							<a href="" target="_blank">美丽家-魅力家-叶之家具</a>
						</div>
					</div>
					<div>
						<div>
							<div>
								<ul>
									<li>
										<a href="F" target="_blank">七夕系列饰品上线特惠</a>
									</li>
									<!--<li>
										<a href="" target="_blank">【严选x中行联名卡】达标领80元礼品卡&gt;</a>
									</li>
									<li>
										<a href="" target="_blank">【福利】下载严选APP，抢1元包邮团，领...</a>
									</li>
									<li>
										<a  href="" target="_blank">七夕系列饰品上线特惠</a>
									</li>-->
								</ul>
							</div>
						</div>
					</div>
				</div>
				<div class="nav-r">
					<div>
						<div id="nar_lr" style="display: block;">
							<div class="navr-lr">
								<div>
									<div id="login" class="" onclick="window.location='login.html'" title="leaf登录">登录</div>
								</div>
							</div>
							<div class="navr-lr" style="margin-left:20px;">
								<div >
									<div onclick="window.location='regin.html'">注册</div>
								</div>
							</div>
						</div>
						<div id="user" style="display: none;">
							<div onmouseout="yc()" onmouseover="xs()" style="">
								<a href=""><div id="user_name" style="text-align: center;overflow: hidden;">123456</div></a>
							</div>
							<div id="service" onmouseout="yc()" onmouseover="xs()" class="navr-btn-tan">
								<a href="Personal.html"><div style="border-bottom: 0.5px solid #999 ;">个人中心</div></a>
								<a href="ShopCart.html"><div style="border-bottom: 0.5px solid #999 ;">购物车</div></a>
								<a href="index.EXIT"><div id="exit">退出</div></a>
							</div>
						</div>
					</div>
					<div class="navr-btn">|</div>
					<div><a href="Personal.html" target="_blank">我的订单</a>
					</div>
					<div class="navr-btn">|</div>
					<div><a target="_blank">会员</a></div>
					<div class="navr-btn">|</div>
					<div><a da target="_blank">甄选家居</a></div>
					<div class="navr-btn">|</div>
					<div><a target="_blank">企业采购</a></div>
					<div class="navr-btn">|</div>
					<div><a target="_blank">客服中心</a></div>
				</div>	
			</nav>
		</header>
		<section class="sec-nav">
			<article class="sec-nav-art">
				<section class="log"><img src="img/log.png" style="width: 240px;height: auto;"></section>
				<div class="form">
					<form action="" method="get">
						<input type="text" id="search" class="search" />
						<button></button>
					</form>
				</div>
				<a href="ShopCart.html" target="_blank"><div class="cart-pic">
					<div id="cart_num" class="cart-pic-num">0</div>
				</div></a>
			</article>
			<nav class="nav-zhu">
				<article class="container">
					<ul class="nav" style="padding-left: 0;">
						<li><a href="index.html" target="_blank">首页</a></li>
						<li>
							<a href="commodity.html?fl=dgzm" target="_blank">灯饰照明</a>
							<ul>
								<li>
									<a href="#" target="_blank">风格灯饰</a>
									<ul>
										<li><a href="#" target="_blank">简易现代灯</a></li>
										<li><a href="#" target="_blank">现代中式灯</a></li>
										<li>
											<a href="#" target="_blank">田园风格灯</a>
											<!--<ul>
												<li><a href="#" target="_blank">Level 3</a></li>
												<li><a href="#" target="_blank">Level 3</a></li>
												<li><a href="#" target="_blank">Level 3</a></li>
												<li><a href="#" target="_blank">Level 3</a></li>
											</ul>-->
										</li>
										<li><a href="#" target="_blank">美式乡村灯</a></li>
									</ul>
								</li>
								<li><a href="#" target="_blank">吸顶灯</a></li>
								<li><a href="#" target="_blank">客厅灯</a></li>
								<li><a href="#" target="_blank">卧室灯</a></li>
								<li><a href="#" target="_blank">台灯</a></li>
								<li><a href="#" target="_blank">浴霸</a></li>
								<li><a href="#" target="_blank">简灯</a></li>
							</ul>
						</li>
						<li>
							<a href="commodity.html?fl=cfwy" target="_blank">厨房卫浴</a>
							<ul>
								<li><a href="#" target="_blank">风格灯饰</a></li>
								<li><a href="#" target="_blank">龙头</a></li>
								<li><a href="#" target="_blank">浴室柜</a></li>
								<li><a href="#" target="_blank">厨房置物架</a></li>
							</ul>
						</li>
						<li>
							<a href="commodity.html?fl=wjgj" target="_blank">五金工具</a>
							<ul>
								<li><a href="#" target="_blank">工具箱</a></li>
								<li><a href="#" target="_blank">锁具</a></li>
								<li><a href="#" target="_blank">家用五金</a></li>
								<li><a href="#" target="_blank">合页</a></li>
								<li><a href="#" target="_blank">电动工具</a></li>
							</ul>
						</li>
						<li>
							<a href="commodity.html?fl=dzdg" target="_blank">电子电工</a>
							<ul>
								<li><a href="#" target="_blank">开关</a></li>
								<li><a href="#" target="_blank">插座</a></li>
								<li><a href="#" target="_blank">智能家居</a></li>
								<li><a href="#" target="_blank">转换器</a></li>
								<li><a href="#" target="_blank">电线</a></li>
							</ul>
						</li>
						<li>
							<a href="commodity.html?fl=jcjc" target="_blank">基础建材</a>
							<ul>
								<li><a href="#" target="_blank">瓷砖</a></li>
								<li><a href="#" target="_blank">油漆</a></li>
								<li><a href="#" target="_blank">地板</a></li>
								<li><a href="#" target="_blank">地板</a></li>
								<li><a href="#" target="_blank">施工材料</a></li>
								<li><a href="#" target="_blank">墙地面材料</a></li>
							</ul>
						</li>
						<li>
							<a href="commodity.html?fl=dzzx" target="_blank">定制装修</a>
							<ul>
								<li><a href="#" target="_blank">定制柜类</a></li>
								<li><a href="#" target="_blank">橱柜定制</a></li>
								<li><a href="#" target="_blank">榻榻米</a></li>
								<li><a href="#" target="_blank">门</a></li>
							</ul>
						</li>
						<li>
							<a target="_blank">叶之家装</a> 
							<!--href="commodity.html?fl="-->
							<ul>
								<li><a href="#" target="_blank">全套家装</a></li>
								<li><a href="#" target="_blank">二手改造</a></li>
								<li><a href="#" target="_blank">装修设计</a></li>
							</ul>
						</li>
					</ul>
				</article>
			</nav>
		</section>
		<section class="sec-center">
			<article style="font-size: 14px;line-height: 25px; margin: 10px auto;">
				<span id="bigclass" style="color: #999;">首页&nbsp;>&nbsp;</span>
				<span id="smallclass" style="color: #999;"></span>
				<span id="cremark" style="color: #999;"></span>
			</article>
			<article class="carousel" style="padding: 0;">
				<div id="banner_tabs" class="flexslider">
					<ul class="slides">
						<li>
							<a id="cara0" title="" target="_blank" href="">
								<img id="carousel0" width="100%" height="400" style="" title="" src="img/carousel/alpha.png">
							</a>
						</li>
						<li>
							<a id="cara1" title="" target="_blank" href="">
								<img id="carousel1" width="100%" height="400" style="" title="" src="img/carousel/alpha.png">
							</a>
						</li>
						<li>
							<a id="cara2" title="" target="_blank" href="">
								<img id="carousel2" width="100%" height="400" style="" title="" src="img/carousel/alpha.png">
							</a>
						</li>
						<li>
							<a id="cara3" title="" target="_blank" href="">
								<img id="carousel3" width="100%" height="400" style="" title="" src="img/carousel/alpha.png">
							</a>
						</li>
						<li>
							<a id="cara4" title="" target="_blank" href="">
								<img id="carousel4" width="100%" height="400" style="" title="" src="img/carousel/alpha.png">
							</a>
						</li>
					</ul>
					<ul class="flex-direction-nav">
						<li><a class="flex-prev" href="javascript:;">Previous</a></li>
						<li><a class="flex-next" href="javascript:;">Next</a></li>
					</ul>
					<ol id="bannerCtrl" style="padding: 0;" class="flex-control-nav flex-control-paging">
						<li><a>1</a></li>
						<li><a>2</a></li>
						<li><a>3</a></li>
						<li><a>4</a></li>
						<li><a>5</a></li>
					</ol>
				</div>
			</article>
		</section>
		<section class="classify">
				<article class="classify-top">
					<section>
						<div class="classify-tit">分类：</div>
						<div class="classify-zt">
							<span style="margin-left: 38px;">全部</span>
							<span id="smallclass_0"></span>
							<span id="smallclass_1"></span>
							<span id="smallclass_2"></span>
							<span id="smallclass_3"></span>
							<span id="smallclass_4"></span>
							<span id="smallclass_5"></span>
							<span id="smallclass_6"></span>
							<span id="smallclass_7"></span>
							<span id="smallclass_8"></span>
							<span id="smallclass_9"></span>
							<span id="smallclass_10"></span>
							<span id="smallclass_11"></span>
							<span id="smallclass_12"></span>
						</div>
					</section>
					<section>
						<div class="classify-tit">配送方式：</div>
						<div class="classify-zt">
							<span style="margin-left: 10px;">全部</span>
							<span>免邮</span>
							<span>自提</span>
							<span>配送</span>
							<span>送货上门</span>
						</div>
					</section>
					<section style="border: none;">
						<div class="classify-tit">排序：</div>
						<div class="classify-zt">
							<span style="margin-left: 38px;">全部</span>
							<span>默认</span>
							<span>价格</span>
							<span>上架时间</span>
							<span>热度</span>
						</div>
					</section>
				</article>
				<section class="classify-center">
					<!--商品不存在时显示-->
					<section id="Cabb_out" style="display: none;width: 600px;height: 201px;margin: 100px auto 0;">
						<img src="img/titts.png" style="width: 600px;"/>
					</section>
					<section id="Cabb_in" class="classify-com" style="">
						<section id="cabb" style="width: 1010px;clear: both;">
										
						</section>
					</section>
					<section>
						<div class="page">
							<div class="pagebtn">
								<button type="button" id="pagefirst">首页</button>
								<button type="button" id="pagesub">上一页</button>
								<button type="button" style="background-color: white;">第<span id="pagesz"></span>页</button>
								<button type="button" id="pageplus">下一页</button>
								<button type="button" id="pageend">尾页</button>
							</div>
						</div>
					</section>
				</section>
		</section>
		<iframe class="ifr-two" src="iframe/foot.html" frameborder="0" scrolling="no"></iframe>
	</body>
	<script>
		
		$(function(){
			/**************轮播*************/
			var bannerSlider = new Slider($('#banner_tabs'), {
				time: 5000,
				delay: 400,
				event: 'hover',
				auto: true,
				mode: 'fade',
				controller: $('#bannerCtrl'),
				activeControllerCls: 'active'
			});
			$('#banner_tabs .flex-prev').click(function() {
				bannerSlider.prev()
			});
			$('#banner_tabs .flex-next').click(function() {
				bannerSlider.next()
			});
			/*******轮播AJAX*********/
			$.ajax({
					type:"post",
					url:"dl.dlning",
					async:false,
					dataType:'json',
					success:function(data){
						var obj=eval(data);
						let state = obj.state;
						if(state=="0000"){
							let user=obj.user;
							$("#nar_lr").css("display","none");
							$("#user").css("display","block");
							$("#user_name").html(user);
						};
						if(state=="0001"){
							$("#nar_lr").css("display","block");
							$("#user").css("display","none");
						};
					}
				});
			$.ajax({
				type:'get',
				url:'engine/cq.ning?cname=carousel_',
				async:false,
				dataType:'json',
				success:function(data){
					var obj=eval(data);
					$.each(obj,function(i){
						let id="#carousel"+i;
						let aid="#cara"+i;
						let add="details.html?cid="+obj[i].cid;
						$(id).css("background","url("+obj[i].Cimgurl+") no-repeat center");
						$(id).attr("title",obj[i].cremark);
						$(aid).attr("href",add);
					});
				}
			});
			/*************分类栏************/
			var Ohref=window.location.href;
			var arrhref=Ohref.split("?fl=");
			var fl=arrhref[1];
			$.getJSON("js/json.json",function(data){
				var obj=eval(data);
				let myfl = null;
				let myflzt = null;
				if(fl=="dgzm"){myflzt="灯光照明";myfl=obj.dgzm}
				if(fl=="cfwy"){myflzt="厨房卫浴";myfl=obj.cfwy}
				if(fl=="wjgj"){myflzt="五金工具";myfl=obj.wjgj}
				if(fl=="dzdg"){myflzt="电子电工";myfl=obj.dzdg}
				if(fl=="jcjc"){myflzt="基础建材";myfl=obj.jcjc}
				if(fl=="dzzx"){myflzt="定制装修";myfl=obj.dzzx}
				$("#smallclass").html(myflzt);
				$.each(myfl,function(i){
					let idfl="#smallclass_"+i;
					$(idfl).html(myfl[i]);
				});
			});
			var comnum=0;
			$.ajax({
				type:"get",
				url:'engine/com.page?fl='+fl,
				async:false,
				dataType:'json',
				success:function(data){
					var obj=eval(data);
					comnum=obj.page;
					comnum=parseInt(comnum);
				}
			});
			let Pnum=0;
			let pagenumber=1;
			let endpage = parseInt(comnum/20);
			let pagesz=1;
			if(comnum%20!=0){
				pagenumber=endpage+1;
			}else{
				pagenumber=endpage;
			}
			$("button").click(function(){
				var id = $(this).attr("id");
				if(id=="pagefirst"){Pnum=0;pagesz=1;$(".rem_jd").remove();refresh(fl,Pnum);};
				if(id=="pageend"){Pnum=endpage*20;pagesz=pagenumber;$(".rem_jd").remove();refresh(fl,Pnum);};
				if(id=="pagesub"){if(Pnum==0){alert("已到首页!")}else{Pnum=Pnum-20;pagesz--;$(".rem_jd").remove();refresh(fl,Pnum);}};
				if(id=="pageplus"){if(pagenumber==pagesz){alert("已到尾页!")}else{Pnum=Pnum+20;pagesz++;$(".rem_jd").remove();refresh(fl,Pnum);}};
				$("#pagesz").html(pagesz);
			});
			$("#pagesz").html(pagesz);
			refresh(fl,Pnum);
			$.ajax({
				type:"get",
				url:"engine/spcb.spcb",
				async:false,
				dataType:'json',
				success:function(data){
					var obj=eval(data);
					let Cnum = obj.Cnum;
					$("#cart_num").html(Cnum);
				}
			});	
		});
		function refresh(fl,Pnum){
				$.ajax({
					type:"get",
					url:'engine/cq.fl?fl='+fl+'&page='+Pnum,
					async:false,
					dataType:'json',
					success:function(data){
						var obj=eval(data);
						if(obj.state=="0001"){
							$("#Cabb_out").css("display","block");
							$("#Cabb_in").css("display","none")
						}
						if(obj.state=="0002"){
							alert("抱歉所有商品已显示完毕");
						}
						if(obj.state=="0000"){
						    let commsg=obj.msg;
							$.each(commsg, function(i) {
								let add="details.html?cid="+commsg[i].cid;
								let pj = '<a class="rem_jd" href=\"'+add+'\"target=\"_blank\">'+
										'<section class=\"cla-com-sub\">'+
										'<article class=\"cla-com-img\">'+
											'<img src=\"'+commsg[i].Cimgurl+'\" width=\"225px\" height=\"225px\" />'+
										'</article>'+
										'<div class=\"cla-com-tit\">'+
											'<div>'+commsg[i].cremark+'</div>'+
											'<div>￥&nbsp;<span>'+commsg[i].cprice+'</span></div>'+
											'<div>'+commsg[i].cclassify+'</div>'+
										'</div>'+
									'</section>'+
								'</a>';
								$("#cabb").append(pj);
							});
						}
					}
				});
			};
	</script>
</html>

